<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>可见度过滤选择器</title>
    <style type="text/css">
      div, span {
        width: 140px;
        height: 140px;
        margin: 20px;
        background: #9999CC;
        border: #000 1px solid;
        float: left;
        font-size: 17px;
        font-family: Roman;
      }

      div.mini {
        width: 30px;
        height: 30px;
        background: #CC66FF;
        border: #000 1px solid;
        font-size: 12px;
        font-family: Roman;
      }

      div.visible {
        display: none;
      }
    </style>
    <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
      $(function () {

        //改变所有可见的div元素的背景色为 #0000FF
        $("#b1").click(
                function () {
                  $("div:visible").css("background", "red")
                }
        )

        //选取所有不可见的div, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF
        $("#b2").click(
                function () {
                  $("div:hidden").css("background", "#0000FF")
                  $("div:hidden").show()
                }
        )

        //选取所有的文本隐藏域, 并打印它们的值
        $("#b3").click(
                function () {
                  //先得到所有的hidden元素
                  //$input是一个jquery对象，而且是数组对象
                  var $input = $("input:hidden");

                  //遍历
                  //方式1 - for
                  for (var i = 0;i < $input.length; i++) {
                    //element是dom对象
                    var element = $input[i];
                    console.log("element=" + element.value);
                  }

                  //方式2 - jquery each() 可以对数组遍历
                  //I)each方法，遍历时，会将$input的元素取出，传给function () {} -> this
                  $input.each(function() {
                    //this对象是一个dom对象
                    console.log("element=" + this.value);
                  })
                }
        )
      })
    </script>
  </head>
  <body>
  <input type="button" value="改变所有可见的div元素的背景色为 #0000FF" id="b1"/> <br/><br/>
  <input type="button" value="选取所有不可见的div, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF" id="b2"/> <br/><br/>
  <input type="button" value="选取所有的文本隐藏域, 并打印它们的值" id="b3"/> <br/><br/>
  <hr/>

  <input type="hidden" value="hidden1"/>
  <input type="hidden" value="hidden2"/>
  <input type="hidden" value="hidden3"/>
  <input type="hidden" value="hidden4"/>

  <div id="one" class="visible">
    div id为one
  </div>

  <div id="two" class="visible">
    div id为two
  </div>

  <div id="three" class="one">
    div id为three
  </div>
  </body>
</html>